<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>项目总览</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style type="text/css">
      .mui-card {
        border-radius: 5px;
        box-shadow: none;
        padding: 15px;
      }
      
      .line {
        display: flex;
        margin-top: 10px;
      }
      
      .line>div {
        flex: 1;
      }
    </style>
  </head>

  <body>
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">项目总览</h1>
    </header>
    <div class="mui-content" id="container" v-cloak>
      <div class="mui-card card_content">
        <div class="flex justify-between margin-bottom-sm">
          <span class="color-999">检修项目：</span>
          <span>{{detail.n}}</span>
        </div>
        <div class="flex justify-between margin-bottom-sm">
          <span class="color-999">项目负责人：</span>
          <span>{{detail.lun}}</span>
        </div>
        <div class="flex justify-between">
          <span class="color-999">项目时间：</span>
          <span>{{formatDate(detail.st)}}-{{formatDate(detail.et)}}</span>
        </div>
      </div>
      <div class="mui-card card_content">
        <div class="padding-bottom-sm border-bottom">
          <span class="color-999">项目进度：</span>
          <span>完成{{detail.pp}}%</span>
        </div>
        <div class="border-bottom padding-bottom-sm">
          <div class="line">
            <div>
              <span class="color-999">工作人数：</span>
              <span>{{detail.wopc}}</span>
            </div>
            <div>
              <span class="color-999">工作人次：</span>
              <span>{{detail.wopt }}</span>
            </div>
          </div>
          <div class="line">
            <div>
              <span class="color-999">总工时：</span>
              <span>{{detail.th}}</span>
            </div>
            <div>
              <span class="color-999">平均工时：</span>
              <span>{{detail.ah}}</span>
            </div>
          </div>
          <div class="line">
            <div>
              <span class="color-999">车辆数量：</span>
              <span>{{detail.cc}}</span>
            </div>
            <div>
              <span class="color-999">使用备件：</span>
              <span>{{detail.umc}}</span>
            </div>
          </div>
        </div>

        <div>
          <div class="line">
            <div>
              <span class="color-999">通知单量：</span>
              <span>{{detail.nc}}</span>
            </div>
            <div>
              <span class="color-999">已关数量：</span>
              <span>{{detail.ncc}}</span>
            </div>
            <div>
              <span class="color-999">未关数量：</span>
              <span>{{detail.nuc}}</span>
            </div>
          </div>

          <div class="line">
            <div>
              <span class="color-999">工单数量：</span>
              <span>{{detail.woc}}</span>
            </div>
            <div>
              <span class="color-999">已关数量：</span>
              <span>{{detail.wocc}}</span>
            </div>
            <div>
              <span class="color-999">未关数量：</span>
              <span>{{detail.wouc}}</span>
            </div>
          </div>

          <div class="line">
            <div>
              <span class="color-999">工作票量：</span>
              <span>{{detail.tc}}</span>
            </div>
            <div>
              <span class="color-999">已关数量：</span>
              <span>{{detail.tcc}}</span>
            </div>
            <div>
              <span class="color-999">未关数量：</span>
              <span>{{detail.tuc}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="mui-card card_content">
        <div class="line">
          <div>
            <span class="color-blue" @click="toTask">任务数量：</span>
            <span>{{detail.tat}}</span>
          </div>
          <div>
            <span class="color-999">已完成数量：</span>
            <span>{{detail.tacc}}</span>
          </div>
          <div>
            <span class="color-999">未完成数量：</span>
            <span>{{detail.tauc}}</span>
          </div>
        </div>
        <div class="line">
          <div>
            <span class="color-999">工序总数：</span>
            <span>{{detail.wpt}}</span>
          </div>
          <div>
            <span class="color-999">已完成数量：</span>
            <span>{{detail.wpcc}}</span>
          </div>
          <div>
            <span class="color-999">缺陷数量：</span>
            <span>{{detail.wpfc}}</span>
          </div>
        </div>

        <div class="line">
          <div>
            <span class="color-999">未完成数量：</span>
            <span>{{detail.wpuc}}</span>
          </div>
          <div>
            <span class="color-999">异常数量：</span>
            <span>{{detail.wpac}}</span>
          </div>
          <div>
            <span class="color-999">关键敏感量：</span>
            <span>{{detail.wpsc}}</span>
          </div>
        </div>
      </div>

      <div class="mui-card card_content">
        <div class="padding-bottom-sm border-bottom">
          <span class="color-999">验收工序总数量：</span>
          <span>{{detail.tct}}</span>
        </div>
        <div class="">
          <div class="line">
            <div>
              <span class="color-999">待整改数量：</span>
              <span>{{detail.tcurc }}</span>
            </div>
            <div>
              <span class="color-999">异常数量：</span>
              <span>{{detail.tcfc}}</span>
            </div>
          </div>
          <div class="line">
            <div>
              <span class="color-999">通过数量：</span>
              <span>{{detail.tcpc}}</span>
            </div>
            <div>
              <span class="color-999">未通过数量：</span>
              <span>{{detail.tcupc}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/mkeyplus.base.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      mui.init()
      let self // 当前页面
      if(window.plus) {
        plusready();
      } else {
        document.addEventListener('plusready', plusready, false);
      }

      function plusready() {
        self = plus.webview.currentWebview();
        vm.id = self.projectId
        vm.getData()
      }
      let vm = new Vue({
        el: '#container',
        data: {
          id: 5,
          detail:{},
        },
        created() {
           
        },
        methods:{
          formatDate(tmp, fmt) {
            return mui.baseApp.formatDate(tmp, fmt)
          },
          getData() {
            let loading = plus.nativeUI.showWaiting('加载中')
            mui.baseApp.httpRequst('get', '/app/api/check/project/overview/' + this.id, {}, (res)=> {
              console.log(res)
              loading.close()
              res.pp = isNaN(res.pp) ? 0: Number((Number(res.pp) * 100).toFixed(2))
              this.detail = res
            }, (err) =>{
              loading.close()
            })
          },
          toTask() {
            mui.baseApp.openWindow('./project_task_list.html', {projectId: this.id})
          }
        }
      })
    </script>
  </body>

</html>